var Renderer = Class.extend({
	init: function(canvas){
		this.initGL(canvas);
		this.movableObjects = [ ];
		this.projectionMatrix = mat4.create();
        mat4.perspective(45, this.gl.viewportWidth / this.gl.viewportHeight, 0.1, 100.0, this.projectionMatrix);
		this.camera = new Camera();
		this.viewProjMatrix = mat4.create();
	},

	initGL: function(canvas) {
		try {
			this.gl = canvas.getContext("experimental-webgl");
			var gl = this.gl;
			gl.viewportWidth = canvas.width;
			gl.viewportHeight = canvas.height;
			gl.enable(gl.TEXTURING);
			gl.enable(gl.TEXTURE_2D);
			
            //gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
            gl.blendFunc(gl.SRC_ALPHA, gl.SRC_COLOR);
            gl.enable(gl.BLEND);
            gl.disable(gl.DEPTH_TEST);

		} catch(e) { 
			alert(e);
		}
		
		if (!this.gl) {
            alert("Could not initialise WebGL, sorry :-(");
			return false;
        }
		return true;
	},

	onFrameUpdate: function(context, elapsedTime) {
		this.gl.viewport(0, 0, this.gl.viewportWidth, this.gl.viewportHeight);
        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
		mat4.multiply(this.projectionMatrix, this.camera.getMatrix(), this.viewProjMatrix)
		
		for (i = 0; i < this.movableObjects.length; i++) {
			movableObject = this.movableObjects[i];
			movableObject.onFrameUpdate(context, elapsedTime);
		}
	},
	
	createQuad: function(context, materialName) {
		quad = new Quad(context, materialName);
		this.movableObjects.push(quad);
		return quad;
	},

	setBackColor: function(color) {
		this.gl.clearColor(color[0], color[1], color[2], color[3]);
	}
}); 
